<template>
	<div class='contact'>
		<div class='banner'>
			<div class='title text-center'><img src='../images/contact/icon.png'></i><span>{{title}}</span></div>
		</div>
		<div class='contact-container'>
			<form class='form'>
				<input :value='type' type='hidden' name='source'>
				<input :value='typeName' type='hidden' name='sourceName'>
			  	<div v-if="ifCompany" class='contact-wrap'>
			  		<input value='' v-model="company" maxlength='100' onafterpaste="this.value=this.value.substr(0,100)" name='company' placeholder='请填写公司'>
			  	</div>
			  	<div class='contact-wrap'>
			  		<input value='' v-model="name" maxlength='20' onafterpaste="this.value=this.value.substr(0,20)" name='name' placeholder='请填写联系人' >
			  	</div>
			  	<div class='contact-wrap'>
			  		<input value='' v-model="contact"  maxlength='20' onafterpaste="this.value=this.value.substr(0,20)" name='contact' placeholder='请填写联系电话' >
			  	</div>
		  	</form>
	  	</div>
	  	<div class='text-center btn-wrap bold'><button type='button' id='contact' v-on:click="submitData" data-company=true data-title='获取方案详情' data-type='2' data-type-name='企业残保金方案咨询'>提&nbsp;&nbsp;交</button></div>
  		<my-loading :status="showLoading"></my-loading>
  		<my-dialog :status="showDialog" :content="dialogContent"></my-dialog>
	</div>
</template>

<script>
import { BASE_HOST } from "../config/address.js";
import myDialog from "../components/dialog";
import myLoading from "../components/loading";
export default {
  name: 'contact',
  data () {
  	let isCompany = window.localStorage.getItem('ifCompany');
    return {
    	title:window.localStorage.getItem('pageTitle'),
  		ifCompany:isCompany,
  		type:window.localStorage.getItem('type'),
  		typeName:window.localStorage.getItem('typeName'),
  		name:'',
  		company:'',
  		contact:'',
  		showLoading:false,
  		showDialog:false,
  		dialogContent:'',
    }
  },
  components: {
	        myDialog,
	        myLoading
        },
  methods: {
    submitData(event) {
	    let _this = this;
    	let param = {};
    	param.company = this.company;
    	param.name = this.name;
    	param.contact = this.contact;
    	param.sourceName = this.typeName;
    	param.source = this.type;
    	if(this.ifCompany && !param.company){
    		this.dialogContent = '请填写公司';
    		this.showDialog = true;
    		this.timeOut(1500,function(){
			    _this.showDialog = false;
    		});
    		return false;
    	}
    	if(!param.name){
    		this.dialogContent = '请填写联系人';
    		this.showDialog = true;
    		this.timeOut(1500,function(){
			    _this.showDialog = false;
    		});
    		return false;
    	}
    	if(!param.contact){
    		this.dialogContent = '请填写联系电话';
    		this.showDialog = true;
    		this.timeOut(1500,function(){
			    _this.showDialog = false;
    		});
    		return false;
    	}
    	this.showLoading = true;
    	this.$http.get(BASE_HOST+'cms/api/mobileContact',{timeout:10000,params:param}).then(function(res){
    		_this.showLoading = false;
    		let r = JSON.parse(res.bodyText);
    		if(r && r.code == 200){
    			_this.dialogContent = r.msg;
    			_this.showDialog = true;
    			
    			_this.timeOut(3000,function(){
	    			_this.showDialog = false;
	    			window.history.go(-1);
	    		});
    		}else{
    			_this.dialogContent = r.msg;
    			_this.showDialog = true;
    			_this.timeOut(3000,function(){
	    			_this.showDialog = false;
	    		});
    		}
		}, function(res) {
			_this.showLoading = false;
			_this.dialogContent = '请求异常';
			_this.showDialog = true;
			_this.timeOut(3000,function(){
    			_this.showDialog = false;
    		});
		});
    },
    timeOut(time,callback){
    	setTimeout(function(){
    		if(callback)
    			callback();
    	},time);
    },
  },
}
</script>

<style lang="scss">
@import "../style/function";
@import "../style/color";
@import "../style/common";
.contact{
	.clearfix{
		clear:both;
	}
	.banner{
	    width: 100%;
	    height:pxToRem(265);
	    background:#58051a; /* 一些不支持背景渐变的浏览器 */
        background: linear-gradient(to right, $light-black1, $dark-red);
	}
	.banner img{
		width: pxToRem(50);
	    height: pxToRem(50);
	    display: inline-block;
    	vertical-align: middle;
	}
	.banner .title{
		color:$white;
		font-size:pxToRem(38);
		padding-top:pxToRem(155);
	}
	.banner .title span{
		margin-left:pxToRem(18);
		display: inline-block;
    	vertical-align: middle;
    	line-height: pxToRem(50);
	}
	.contact-container{
		padding: pxToRem(40) pxToRem(40);
	}
	.contact-wrap input{
		width:100%;
		height:pxToRem(32);
		margin-top:pxToRem(40);
		padding: pxToRem(24) 0;
		font-size:pxToRem(32);
		border:0;
		outline:none;
		border-radius:0;
		border-bottom:2px solid $light-grey4;
	}
	.contact-wrap input:focus,.contact-wrap input.focus{
		border-bottom:2px solid $red;
	}
	.btn-wrap{
		margin-top:pxToRem(72);
		padding-bottom:pxToRem(338);
		text-align:center;
	}
	.btn-wrap button{
		width:pxToRem(400);
		height:pxToRem(72);
		border-radius:pxToRem(36);
		color:$white;
		background-color:$red;
		border:0;
		font-size:pxToRem(32);
	}
}
</style>
